<template>
  <div class="page-detail">
    <div class="detail center">
      <div class="top-block">
        <h1>{{$route.meta.title}}</h1>
        <div class="top-line"></div>
      </div>

      <div class="block">
        <div class="title-bar">
          <div class="title">
            <h2>订单编号：
              <value :model="data" prop="orderSubNo"/>
              <span class="status">【<value :model="data" prop="status" dictName="order_status" />】</span>
            </h2>
          </div>
          <div class="op">
            <el-button type="text" @click="openModifyRecord">修改记录</el-button>
          </div>
        </div>
        <div class="content">
          <div class="order">
            <el-row type="flex">
              <el-col :span="2">出发地</el-col>
              <el-col :span="4"><value :model="data" prop="startCode" type="city"/></el-col>
              <el-col :span="2">目的地</el-col>
              <el-col :span="4"><value :model="data" prop="destinationCode" type="city"/></el-col>
              <el-col :span="2">制单时间</el-col>
              <el-col :span="4"><value :model="data" prop="createTime" type="datetime"/></el-col>
              <el-col :span="2">制单人</el-col>
              <el-col :span="4"><value :model="data" prop="createUserName"/></el-col>
            </el-row>
            <el-row type="flex">
              <el-col :span="2">公司名称</el-col>
              <el-col :span="10"><value :model="data" prop="companyName"/></el-col>
              <el-col :span="2">委托人信息</el-col>
              <el-col :span="10"><value :model="data" prop="linkmanName"/><span v-html="'　'"></span><value :model="data" prop="linkmanPhone"/></el-col>
            </el-row>
            <el-row type="flex">
              <el-col :span="2">提车方式</el-col>
              <el-col :span="4"><value :model="data" prop="pickType" dictName="pickcar_type"/></el-col>
              <el-col :span="2">提车联系人</el-col>
              <el-col :span="4"><span style="width: 70px; overflow: hidden; text-overflow: ellipsis"><value :model="data" prop="pickLinkmanName"/></span><span v-html="'　'"></span><value :model="data" prop="pickLinkmanPhone"/></el-col>
              <el-col :span="2">提车地址</el-col>
              <el-col :span="10"><value :model="data" prop="pickAddress" show-overflow-tooltip/></el-col>
            </el-row>
            <el-row type="flex">
              <el-col :span="2">送车方式</el-col>
              <el-col :span="4"><value :model="data" prop="takeType" dictName="takecar_type"/></el-col>
              <el-col :span="2">收货人信息</el-col>
              <el-col :span="4"><span style="width: 70px; overflow: hidden; text-overflow: ellipsis"><value :model="data" prop="consigneeName" show-overflow-tooltip/></span><span v-html="'　'"></span><value :model="data" prop="consigneePhone"/></el-col>
              <el-col :span="2">收货地址</el-col>
              <el-col :span="10"><value :model="data" prop="takeAddress" show-overflow-tooltip/></el-col>
            </el-row>
            <el-row type="flex">
              <el-col :span="2">备注</el-col>
              <el-col :span="22"><value :model="data" prop="remark" show-overflow-tooltip/></el-col>
            </el-row>
          </div>
        </div>
      </div>

      <div class="block">
        <div class="title-bar">
          <div class="title"><h2>车辆及费用信息</h2></div>
          <div class="op">
            <el-button type="text" @click="openFeeDetail">费用明细</el-button>
          </div>
        </div>
        <div class="content">
          <el-table :data="[data]" border>
            <el-table-column label="车辆名称">
              <template v-slot="{row}">
                <value :model="row" prop="carName"/>
              </template>
            </el-table-column>
            <el-table-column label="车牌/车架号" width="146">
              <template v-slot="{row}">
                <value :model="row" prop="vin"/>
              </template>
            </el-table-column>
<!--            <el-table-column label="车价值(万）" width="86">-->
<!--              <template v-slot="{row}">-->
<!--                <value :model="row" prop="carCost"/>-->
<!--              </template>-->
<!--            </el-table-column>-->
            <el-table-column label="运输费">
              <template v-slot="{row}">
                <value :model="row" prop="transportFee"/>
              </template>
            </el-table-column>
            <el-table-column label="保险费">
              <template v-slot="{row}">
                <value :model="row" prop="insuranceFee"/>
              </template>
            </el-table-column>
            <el-table-column label="客户返款">
              <template v-slot="{row}">
                <value :model="row" prop="kickbackFee"/>
              </template>
            </el-table-column>
            <el-table-column label="开票税额">
              <template v-slot="{row}">
                <value :model="row" prop="invoiceFee"/>
              </template>
            </el-table-column>
            <el-table-column label="提车费">
              <template v-slot="{row}">
                <value :model="row" prop="pickFee"/>
              </template>
            </el-table-column>
            <el-table-column label="送车费">
              <template v-slot="{row}">
                <value :model="row" prop="takeFee"/>
              </template>
            </el-table-column>
            <el-table-column label="现付" width="60">
              <template v-slot="{row}">
                <value :model="row" prop="spotPayFee"/>
              </template>
            </el-table-column>
            <el-table-column label="到付" width="60">
              <template v-slot="{row}">
                <value :model="row" prop="deliveryPayFee"/>
              </template>
            </el-table-column>
            <el-table-column label="欠付" width="60">
              <template v-slot="{row}">
                <value :model="row" prop="backPayFee"/>
              </template>
            </el-table-column>
            <el-table-column label="月付" width="60">
              <template v-slot="{row}">
                <value :model="row" prop="slotPayFee"/>
              </template>
            </el-table-column>
            <el-table-column label="应收运费合计" width="94">
              <template v-slot="{row}">
                <value :model="row" prop="totalFee"/>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <div class="blocks-2">
        <div class="block-2">
          <div class="title-bar" style="background: #F7FCFF">
            <img class="icon" src="/img/order-detail/lc.svg">
            <div class="title"><h2>流程进度</h2></div>
          </div>
          <div class="content">
            <div class="status-steps">
              <div class="step" :class="{on: orderStepsData.stepStatus == 0, finish: orderStepsData.stepStatus > 0}">
                <div class="icon">
                  <div class="dash"></div>
                  <div class="dot"></div>
                  <div class="dash"></div>
                </div>
                <div class="label">制单完成</div>
                <div class="value">
                  <div><value :model="orderStepsData" prop="createUser"/></div>
                  <div><value :model="orderStepsData" prop="createTime" type="datetime"/></div>
                </div>
              </div>
              <div class="step" :class="{on: orderStepsData.stepStatus == 1, finish: orderStepsData.stepStatus > 1}">
                <div class="icon">
                  <div class="dash"></div>
                  <div class="dot"></div>
                  <div class="dash"></div>
                </div>
                <div class="label">已提车</div>
                <div class="value">
                  <div><value :model="orderStepsData" prop="pickCarUser"/></div>
                  <div><value :model="orderStepsData" prop="pickCarTime" type="datetime"/></div>
                </div>
              </div>
              <div class="step" :class="{on: orderStepsData.stepStatus == 2, finish: orderStepsData.stepStatus > 2}">
                <div class="icon">
                  <div class="dash"></div>
                  <div class="dot"></div>
                  <div class="dash"></div>
                </div>
                <div class="label">已验车</div>
                <div class="value">
                  <div><value :model="orderStepsData" prop="verifyCarUser"/></div>
                  <div><value :model="orderStepsData" prop="verifyCarTime" type="datetime"/></div>
                </div>
              </div>
              <div class="step" :class="{on: orderStepsData.stepStatus == 3, finish: orderStepsData.stepStatus > 3}">
                <div class="icon">
                  <div class="dash"></div>
                  <div class="dot"></div>
                  <div class="dash"></div>
                </div>
                <div class="label">已入库</div>
                <div class="value">
                  <div><value :model="orderStepsData" prop="stockUser"/></div>
                  <div><value :model="orderStepsData" prop="stockTime" type="datetime"/></div>
                </div>
              </div>
              <div class="step" :class="{on: orderStepsData.stepStatus == 4, finish: orderStepsData.stepStatus > 4}">
                <div class="icon">
                  <div class="dash"></div>
                  <div class="dot"></div>
                  <div class="dash"></div>
                </div>
                <div class="label">已发车</div>
                <div class="value">
                  <div><value :model="orderStepsData" prop="transportUser"/></div>
                  <div><value :model="orderStepsData" prop="transportTime" type="datetime"/></div>
                </div>
              </div>
              <div class="step" :class="{on: orderStepsData.stepStatus == 5, finish: orderStepsData.stepStatus > 5}">
                <div class="icon">
                  <div class="dash"></div>
                  <div class="dot"></div>
                  <div class="dash"></div>
                </div>
                <div class="label">已到达</div>
                <div class="value">
                  <div><value :model="orderStepsData" prop="signUser"/></div>
                  <div><value :model="orderStepsData" prop="signTime" type="datetime"/></div>
                </div>
              </div>
              <div class="step" :class="{on: orderStepsData.stepStatus == 6, finish: orderStepsData.stepStatus > 6}">
                <div class="icon">
                  <div class="dash"></div>
                  <div class="dot"></div>
                  <div class="dash"></div>
                </div>
                <div class="label">已送车</div>
                <div class="value">
                  <div><value :model="orderStepsData" prop="takeCarUser"/></div>
                  <div><value :model="orderStepsData" prop="takeCarTime" type="datetime"/></div>
                </div>
              </div>
              <div class="step" :class="{on: orderStepsData.stepStatus == 7, finish: orderStepsData.stepStatus > 7}">
                <div class="icon">
                  <div class="dash"></div>
                  <div class="dot"></div>
                  <div class="dash"></div>
                </div>
                <div class="label">已交付</div>
                <div class="value">
                  <div><value :model="orderStepsData" prop="deliveryUser"/></div>
                  <div><value :model="orderStepsData" prop="deliveryTime" type="datetime"/></div>
                </div>
              </div>
              <div class="step" :class="{on: orderStepsData.stepStatus == -1}">
                <div class="icon">
                  <div class="dash"></div>
                  <div class="dot"></div>
                  <div class="dash"></div>
                </div>
                <div class="label">已取消</div>
              </div>
            </div>
          </div>
        </div>

        <div class="block-2" v-if="data.orderPick && (data.pickType == 1 || data.pickType == 2)">
          <div class="title-bar" style="background: #F7FAFE">
            <img class="icon" src="/img/order-detail/tc.svg">
            <div class="title"><h2>提车信息</h2></div>
            <div class="separator"></div>
            <div class="items">
              <div class="item">
                <div class="label">应付提车费：</div>
                <div class="value"><value :model="data" prop="orderPick.pickCarFee" type="money"/></div>
              </div>
            </div>
          </div>
          <div class="content">
            <div class="blocks-3">
              <el-row type="flex">
                <el-col :span="8">
                  <div class="block-3">
                    <div class="item bold">
                      <div class="label">指派结算人时间：</div>
                      <div class="value"><value :model="data" prop="orderPick.createTime" type="datetime"/></div>
                    </div>
                    <div class="item bold">
                      <div class="label">指派人：</div>
                      <div class="value"><value :model="data" prop="orderPick.createUserName"/></div>
                    </div>
                    <div class="item">
                      <div class="label">公司名称：</div>
                      <div class="value"><value :model="data" prop="orderPick.company"/></div>
                    </div>
                    <div class="item">
                      <div class="label">结算方式：</div>
                      <div class="value"><value :model="data" prop="orderPick.settlementType" dictName="settlement_type"/></div>
                    </div>
                    <div class="item">
                      <div class="label">结算人信息：</div>
                      <div class="value">
                        <value :model="data" prop="orderPick.settlementName"/><span v-html="'　'"></span>
                        <value :model="data" prop="orderPick.settlementPhone"/>
                      </div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="separator"></div>
                  <div class="block-3">
                    <div class="item bold">
                      <div class="label">指派司机时间：</div>
                      <div class="value"><value :model="data" prop="orderPick.assignDriverTime" type="datetime"/></div>
                    </div>
                    <div class="item bold">
                      <div class="label">指派人：</div>
                      <div class="value"><value :model="data" prop="orderPick.assignDriverUserName"/></div>
                    </div>
                    <div class="item">
                      <div class="label">司机信息：</div>
                      <div class="value">
                        <value :model="data" prop="orderPick.driverName"/><span v-html="'　'"></span>
                        <value :model="data" prop="orderPick.driverPhone"/>
                      </div>
                    </div>
                    <div class="item">
                      <div class="label">身份证号：</div>
                      <div class="value"><value :model="data" prop="orderPick.driverCardNumber"/></div>
                    </div>
                    <div class="item">
                      <div class="label">小板车牌：</div>
                      <div class="value"><value :model="data" prop="orderPick.licensePlateNumber"/></div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>

        <div class="block-2" v-if="data.orderCarVerify">
          <div class="title-bar" style="background: #FFFBF7">
            <img class="icon" src="/img/order-detail/yc.svg">
            <div class="title"><h2>验车信息<span class="status" v-if="orderStepsData.status >= 3">【已入库】</span></h2></div>
          </div>
          <div class="content">
            <div class="blocks-3">
              <el-row type="flex">
                <el-col :span="8">
                  <div class="block-3">
                    <div class="item bold">
                      <div class="label">验车时间：</div>
                      <div class="value"><value :model="data" prop="orderCarVerify.createTime" type="datetime"/></div>
                    </div>
                    <div class="item bold">
                      <div class="label">验车人：</div>
                      <div class="value"><value :model="data" prop="orderCarVerify.createUserName"/></div>
                    </div>
                    <div class="item bold">
                      <div class="label">入库时间：</div>
                      <div class="value"><value :model="data" prop="orderStock.createTime" type="datetime"/></div>
                    </div>
                    <div class="item bold">
                      <div class="label">入库人：</div>
                      <div class="value"><value :model="data" prop="orderStock.createUserName"/></div>
                    </div>
                    <div class="item">
                      <div class="label">公里数(km)：</div>
                      <div class="value"><value :model="data" prop="orderCarVerify.km"/></div>
                    </div>
                    <div class="item">
                      <div class="label">车牌/车架号：</div>
                      <div class="value"><value :model="data" prop="vin"/></div>
                    </div>
                    <div class="item">
                      <div class="label">验车备注：</div>
                      <div class="value"><value :model="data" prop="orderCarVerify.remark"/></div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="16">
                  <div class="separator"></div>
                  <div class="block-3" style="flex: 1">
                    <el-row type="flex" :gutter="32">
                      <el-col :span="24">
                        <div>
                          <div class="item">
                            <div class="label">随车物品：</div>
                            <div class="value">
                              <div v-if="data.orderCarVerify && (data.orderCarVerify.specification || data.orderCarVerify.towHook || data.orderCarVerify.ashtray || data.orderCarVerify.toolkit || data.orderCarVerify.cigarLighter || data.orderCarVerify.bellCover || data.orderCarVerify.jack || data.orderCarVerify.antenna || data.orderCarVerify.key || data.orderCarVerify.warningSign || data.orderCarVerify.licensePlateFrame || data.orderCarVerify.footPad || data.orderCarVerify.airPump || data.orderCarVerify.aidPacket || data.orderCarVerify.spareTire)" class="accessory">
                                <span v-if="data.orderCarVerify.specification">说明书<value :model="data" prop="orderCarVerify.specification"/></span>
                                <span v-if="data.orderCarVerify.towHook">拖车钩<value :model="data" prop="orderCarVerify.towHook"/></span>
                                <span v-if="data.orderCarVerify.ashtray">烟灰缸<value :model="data" prop="orderCarVerify.ashtray"/></span>
                                <span v-if="data.orderCarVerify.toolkit">工具包<value :model="data" prop="orderCarVerify.toolkit"/></span>
                                <span v-if="data.orderCarVerify.cigarLighter">点烟器<value :model="data" prop="orderCarVerify.cigarLighter"/></span>
                                <span v-if="data.orderCarVerify.bellCover">胎铃盖<value :model="data" prop="orderCarVerify.bellCover"/></span>
                                <span v-if="data.orderCarVerify.jack">千斤顶<value :model="data" prop="orderCarVerify.jack"/></span>
                                <span v-if="data.orderCarVerify.antenna">天　线<value :model="data" prop="orderCarVerify.antenna"/></span>
                                <span v-if="data.orderCarVerify.key">车钥匙<value :model="data" prop="orderCarVerify.key"/></span>
                                <span v-if="data.orderCarVerify.warningSign">警示牌<value :model="data" prop="orderCarVerify.warningSign"/></span>
                                <span v-if="data.orderCarVerify.licensePlateFrame">牌照架<value :model="data" prop="orderCarVerify.licensePlateFrame"/></span>
                                <span v-if="data.orderCarVerify.footPad">脚　垫<value :model="data" prop="orderCarVerify.footPad"/></span>
                                <span v-if="data.orderCarVerify.airPump">气　泵<value :model="data" prop="orderCarVerify.airPump"/></span>
                                <span v-if="data.orderCarVerify.aidPacket">急救包<value :model="data" prop="orderCarVerify.aidPacket"/></span>
                                <span v-if="data.orderCarVerify.spareTire">备　胎<value :model="data" prop="orderCarVerify.spareTire"/></span>
                              </div>
                              <template v-else>-</template>
                            </div>
                          </div>
                          <div class="item">
                            <div class="label">验车照片：</div>
                          </div>
                        </div>
                      </el-col>
<!--                      <el-col :span="8">-->
<!--                        <div>-->
<!--                          -->
<!--                        </div>-->
<!--                      </el-col>-->
                    </el-row>
<!--                    <div class="imgs">-->
                      <div v-if="data.orderCarVerify.validateImages.length > 0" v-viewer :images="data.orderCarVerify.validateImages" class="imgs">
                        <img v-for="(src, index) in data.orderCarVerify.validateImages" :style="`visibility: ${isShowMoreValidateImage(index) ? 'visible' : 'hidden'};`" :src="src">
                        <el-button v-if="data.orderCarVerify.validateImages.length > maxValidateImage" @click="showMoreImgs" class="imgs-btn">更多</el-button>
                      </div>
                      <div v-else class="no-img" v-else style="color: #ababab">暂无照片</div>
                      <!-- <value :model="data" prop="orderCarVerify.validateImages" type="img"/> -->
<!--                    </div>-->
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>

        <div class="block-2" v-if="data.transportSimpleList" v-for="(transport, index) in data.transportSimpleList" :key="index">
          <div class="title-bar" style="background: #F9FAFE">
            <img class="icon" src="/img/order-detail/fy.svg">
            <div class="title"><h2>运单号：<value :model="transport" prop="transportSimple.transportNo"/><span class="status" v-if="orderStepsData.status >= 7">【已签收】</span></h2></div>
            <div class="items">
              <div class="item">
                <div class="label">运输路线：</div>
<!--                <div class="value"><value :model="transport" prop="transportSimple.line" type="line"/></div>-->
                <div class="value"><value :model="transport" prop="startCode" type="city"/> - <value :model="transport" prop="destinationCode" type="city"/></div>
              </div>
              <div class="item">
                <div class="label">应付承运费：</div>
                <div class="value"><value :model="transport" prop="cost" type="money"/></div>
              </div>
              <div class="item">
                <div class="label">是否代收：</div>
                <div class="value">{{transport.hasCollection ? '是' : '否'}}</div>
              </div>
              <div class="item" v-if="transport.hasCollection">
                <div class="label">代收金额：</div>
                <div class="value"><value :model="data" prop="deliveryPayFee" type="money"/></div>
              </div>
            </div>
          </div>
          <div class="content">
            <div class="blocks-3">
              <el-row type="flex">
                <el-col :span="8">
                  <div class="block-3">
                    <div class="item bold">
                      <div class="label">发运时间：</div>
                      <div class="value"><value :model="transport" prop="transportSimple.createTime" type="datetime"/></div>
                    </div>
                    <div class="item bold">
                      <div class="label">发运人：</div>
                      <div class="value"><value :model="transport" prop="transportSimple.createUserName"/></div>
                    </div>
                    <div class="item">
                      <div class="label">公司名称：</div>
                      <div class="value"><value :model="transport" prop="transportSimple.cargoCompany"/></div>
                    </div>
                    <div class="item">
                      <div class="label">结算人信息：</div>
                      <div class="value">
                        <value :model="transport" prop="transportSimple.settlementUser"/><span v-html="'　'"></span>
                        <value :model="transport" prop="transportSimple.settlementPhone"/>
                      </div>
                    </div>
                    <div class="item">
                      <div class="label">司机信息：</div>
                      <div class="value">
                        <value :model="transport" prop="transportSimple.driverName"/><span v-html="'　'"></span>
                        <value :model="transport" prop="transportSimple.driverPhone"/>
                      </div>
                    </div>
                    <div class="item">
                      <div class="label">大板车牌：</div>
                      <div class="value"><value :model="transport" prop="transportSimple.licensePlateNumber"/></div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="separator"></div>
                  <div class="block-3">
                    <div class="item bold">
                      <div class="label">交付方式：</div>
                      <div class="value"><value :model="transport" prop="transportLevelSimple.type" dictName="delivery_type"/></div>
                    </div>
                    <div class="item bold">
                      <div class="label">网点名称：</div>
<!--                      <div class="value"><value :model="transport" prop="transportLevelSimple.siteId" siteId="id"/></div>-->
                      <div class="value"><value :model="transport" prop="transportLevelSimple.siteName"/></div>
                    </div>
                    <div class="item">
                      <div class="label">接车人信息：</div>
                      <div class="value">
                        <value :model="transport" prop="transportLevelSimple.receiveUser"/><span v-html="'　'"></span>
                        <value :model="transport" prop="transportLevelSimple.receivePhone"/>
                      </div>
                    </div>
                    <div class="item">
                      <div class="label">接车地址：</div>
                      <div class="value"><value :model="transport" prop="transportLevelSimple.receiveAddress"/></div>
                    </div>
                    <div class="item">
                      <div class="label">结算方式：</div>
                      <div class="value"><value :model="transport" prop="transportLevelSimple.settlementType" dictName="settlement_type"/></div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="8" v-if="transport.orderSign">
                  <div class="separator"></div>
                  <div class="block-3">
                    <div class="item bold">
                      <div class="label">签收时间：</div>
                      <div class="value"><value :model="transport" prop="orderSign.createTime" type="datetime"/></div>
                    </div>
                    <div class="item bold">
                      <div class="label">签收人：</div>
                      <div class="value"><value :model="transport" prop="orderSign.createUserName"/></div>
                    </div>
                    <div class="item">
                      <div class="label">签收类型：</div>
                      <div class="value"><value :model="transport" prop="orderSign.needMoreTransport" dictName="sign_type"/></div>
                    </div>
                    <div class="item">
                      <div class="label">签收备注：</div>
                      <div class="value"><value :model="transport" prop="orderSign.remark"/></div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="block-2 block-2-record" v-if="transport.logisticsList.length > 0">
            <div class="title-bar" style="background: #FAFAFA">
              <img class="icon" src="/img/order-detail/zt.svg">
              <div class="title"><h2>在途跟踪记录</h2></div>
            </div>
            <div class="content">
              <div class="record" :style="transportExpanded[index].expanded ? '' : 'max-height: 200px'">
                <div class="step" v-for="(record, index) in [...transport.logisticsList].reverse()" :key="index">
                  <div class="info">
                    <div class="icon-dot"></div>
                    <div class="value">
                      <div><value :model="record" prop="createTime" type="datetime"/></div>
                      <div><value :model="record" prop="arriveLocation" show-overflow-tooltip/></div>
                    </div>
                  </div>
                  <div class="other">
                    <div class="icon-line"></div>
                    <div v-if="index < transport.logisticsList.length - 1" class="other-content">
                      <div class="item">
                        <div class="label">跟踪备注：</div><div class="value"><value :model="record" prop="remark"/></div>
                      </div>
                      <div class="item">
                        <div class="label">跟踪人：</div><div class="value"><value :model="record" prop="createUserName"/></div>
                        <div v-if="record.appShow" v-html="'　已通知用户'" style="color: #ff4d4f"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <el-button class="btn-more" type="text" :icon="transportExpanded[index].expanded ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" @click="expand(index)">{{transportExpanded[index].expanded ? '收起' : '更多'}}</el-button>
          </div>
        </div>

        <div class="block-2" v-if="data.orderTake">
          <div class="title-bar" style="background: #F7FDFD">
            <img class="icon" src="/img/order-detail/sc.svg">
            <div class="title"><h2>送车信息</h2></div>
            <div class="separator"></div>
            <div class="items">
              <div class="item">
                <div class="label">应付送车费：</div>
                <div class="value"><value :model="data" prop="orderTake.takeCarFee" type="money"/></div>
              </div>
            </div>
          </div>
          <div class="content">
            <div class="blocks-3">
              <el-row type="flex">
                <el-col :span="8">
                  <div class="block-3">
                    <div class="item bold">
                      <div class="label">指派结算人时间：</div>
                      <div class="value"><value :model="data" prop="orderTake.createTime" type="datetime"/></div>
                    </div>
                    <div class="item bold">
                      <div class="label">指派人：</div>
                      <div class="value"><value :model="data" prop="orderTake.createUserName"/></div>
                    </div>
                    <div class="item">
                      <div class="label">公司名称：</div>
                      <div class="value"><value :model="data" prop="orderTake.company"/></div>
                    </div>
                    <div class="item">
                      <div class="label">结算方式：</div>
                      <div class="value"><value :model="data" prop="orderTake.settlementType" dictName="settlement_type"/></div>
                    </div>
                    <div class="item">
                      <div class="label">结算人信息：</div>
                      <div class="value">
                        <value :model="data" prop="orderTake.settlementName"/><span v-html="'　'"></span>
                        <value :model="data" prop="orderTake.settlementPhone"/>
                      </div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="separator"></div>
                  <div class="block-3">
                    <div class="item bold">
                      <div class="label">指派司机时间：</div>
                      <div class="value"><value :model="data" prop="orderTake.assignDriverTime" type="datetime"/></div>
                    </div>
                    <div class="item bold">
                      <div class="label">指派人：</div>
                      <div class="value"><value :model="data" prop="orderTake.assignDriverUserName"/></div>
                    </div>
                    <div class="item">
                      <div class="label">司机信息：</div>
                      <div class="value">
                        <value :model="data" prop="orderTake.driverName"/><span v-html="'　'"></span>
                        <value :model="data" prop="orderTake.driverPhone"/>
                      </div>
                    </div>
                    <div class="item">
                      <div class="label">身份证号：</div>
                      <div class="value"><value :model="data" prop="orderTake.driverCardNumber"/></div>
                    </div>
                    <div class="item">
                      <div class="label">小板车牌：</div>
                      <div class="value"><value :model="data" prop="orderTake.licensePlateNumber"/></div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>

        <div class="block-2" v-if="data.orderFinish">
          <div class="title-bar" style="background: #F9FBFE">
            <img class="icon" src="/img/order-detail/jf.svg">
            <div class="title"><h2>交付信息</h2></div>
<!--            <div class="separator"></div>-->
<!--            <div class="items">-->
<!--              <div class="item">-->
<!--                <div class="label">到付金额：</div>-->
<!--                <div class="value"><value :model="data" prop="orderTake.takeCarFee" type="money"/></div>-->
<!--              </div>-->
<!--            </div>-->
          </div>
          <div class="content">
            <div class="blocks-3">
              <el-row type="flex">
                <el-col :span="8">
                  <div class="block-3">
                    <div class="item bold">
                      <div class="label">交付时间：</div>
                      <div class="value"><value :model="data" prop="orderFinish.createTime" type="datetime"/></div>
                    </div>
                    <div class="item bold">
                      <div class="label">交付人：</div>
                      <div class="value"><value :model="data" prop="orderFinish.createUserName"/></div>
                    </div>
                    <div class="item">
                      <div class="label">收款方式：</div>
                      <div class="value"><value :model="data" prop="orderFinish.type" dictName="delivery_payment_type"/></div>
                    </div>
                    <template v-if="data.orderFinish.type == 1">
                      <div class="item">
                        <div class="label">交易单号：</div>
                        <div class="value"><value :model="data" prop="orderFinish.onlinePayRecord.sn"/></div>
                      </div>
                      <div class="item">
                        <div class="label">支付方式：</div>
                        <div class="value"><value :model="data" prop="orderFinish.onlinePayRecord.payway" dictName="online_pay_way"/></div>
                      </div>
                      <div class="item">
                        <div class="label"><value :model="data" prop="orderFinish.onlinePayRecord.payway" dictName="online_pay_way"/>单号：</div>
                        <div class="value"><value :model="data" prop="orderFinish.onlinePayRecord.tradeNo"/></div>
                      </div>
                      <div class="item">
                        <div class="label">支付时间：</div>
                        <div class="value"><value :model="data" prop="orderFinish.onlinePayRecord.finishTime" type="datetime"/></div>
                      </div>
                      <div class="item">
                        <div class="label">支付金额：</div>
                        <div class="value"><value :model="data" prop="orderFinish.onlinePayRecord.totalAmount" type="money"/></div>
                      </div>
                    </template>
                    <template v-else-if="data.orderFinish.type == 3">
                      <div class="item">
                        <div class="label">支付金额：</div>
                        <div class="value"><value :model="data" prop="orderFinish.cashFee" type="money"/></div>
                      </div>
                    </template>
                    <template v-else-if="data.orderFinish.type == 4">
                      <div class="item">
                        <div class="label">代收人信息：</div>
                        <div class="value">
                          <value :model="data" prop="orderFinish.collectionName"/><span v-html="'　'"></span>
                          <value :model="data" prop="orderFinish.collectionPhone" type="tel"/>
                        </div>
                      </div>
                    </template>
                  </div>

                </el-col>
                <el-col :span="16">
                  <div class="separator"></div>
                  <div class="block-3">
                    <div class="item" style="flex-direction: column">
                      <div class="label" style="margin-bottom: 10px">交付凭证：</div>
                      <div class="value"><value :model="data" prop="orderFinish.takeCarImageList" type="img"/></div>
                    </div>
                    <div class="item" style="flex-direction: column" v-if="data.orderFinish.type == 2">
                      <div class="label" style="margin-bottom: 10px">付款凭证：</div>
                      <div class="value"><value :model="data" prop="orderFinish.paymentImageList" type="img"/></div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog title="费用明细" :visible.sync="feeDetail.visible" custom-class="ad-dialog" width="1000px">
      <div class="fee-block">
        <div class="title-bar">
          <h2>应收费用</h2>
        </div>
        <el-table :data="[data]" border>
          <el-table-column label="运输费">
            <template v-slot="{row}">
              <value :model="row" prop="transportFee"/>
            </template>
          </el-table-column>
          <el-table-column label="保险费">
            <template v-slot="{row}">
              <value :model="row" prop="insuranceFee"/>
            </template>
          </el-table-column>
          <el-table-column label="客户返款">
            <template v-slot="{row}">
              <value :model="row" prop="kickbackFee"/>
            </template>
          </el-table-column>
          <el-table-column label="开票税额">
            <template v-slot="{row}">
              <value :model="row" prop="invoiceFee"/>
            </template>
          </el-table-column>
          <el-table-column label="提车费">
            <template v-slot="{row}">
              <value :model="row" prop="pickFee"/>
            </template>
          </el-table-column>
          <el-table-column label="送车费">
            <template v-slot="{row}">
              <value :model="row" prop="takeFee"/>
            </template>
          </el-table-column>
          <el-table-column label="现付">
            <template v-slot="{row}">
              <value :model="row" prop="spotPayFee"/>
            </template>
          </el-table-column>
          <el-table-column label="到付">
            <template v-slot="{row}">
              <value :model="row" prop="deliveryPayFee"/>
            </template>
          </el-table-column>
          <el-table-column label="欠付">
            <template v-slot="{row}">
              <value :model="row" prop="backPayFee"/>
            </template>
          </el-table-column>
          <el-table-column label="月付">
            <template v-slot="{row}">
              <value :model="row" prop="slotPayFee"/>
            </template>
          </el-table-column>
          <el-table-column label="应收运费合计" width="94">
            <template v-slot="{row}">
              <value :model="row" prop="totalFee"/>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="fee-block">
        <div class="title-bar">
          <h2>应付费用</h2>
        </div>
        <el-table :data="data.paymentDetailList" border>
          <el-table-column label="运输环节">
            <template v-slot="{row}">
              <value :model="row" prop="scene"/>
            </template>
          </el-table-column>
          <el-table-column label="费用类型">
            <template v-slot="{row}">
              <value :model="row" prop="name"/>
            </template>
          </el-table-column>
          <el-table-column label="费用金额">
            <template v-slot="{row}">
              <value :model="row" prop="fee"/>
            </template>
          </el-table-column>
          <el-table-column label="结算人">
            <template v-slot="{row}">
              <value :model="row" prop="settlementName"/>
            </template>
          </el-table-column>
          <el-table-column label="结算电话">
            <template v-slot="{row}">
              <value :model="row" prop="settlementPhone"/>
            </template>
          </el-table-column>
          <el-table-column label="添加人">
            <template v-slot="{row}">
              <value :model="row" prop="createUserName"/>
            </template>
          </el-table-column>
          <el-table-column label="添加时间">
            <template v-slot="{row}">
              <value :model="row" prop="createTime" type="datetime"/>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
    <el-dialog title="修改记录" :visible.sync="modifyRecord.visible" custom-class="ad-dialog" width="1000px">
      <div class="block-2 table">
<!--        <div class="title-bar" style="background: #FFFBFA">-->
<!--          <div class="title"><h2>修改记录</h2></div>-->
<!--        </div>-->
        <div class="content">
          <el-table :data="data.modifyList" border max-height="400">
            <template slot="empty">
              <div style="display: flex; padding: 30px 0 20px; flex-direction: column; align-items: center; justify-content: center; line-height: 30px">
                <img src="/img/icon-empty.svg">
                <div>暂无数据</div>
              </div>
            </template>
            <el-table-column label="序号" type="index" align="center" width="50"/>
            <el-table-column label="修改项目" prop="columnDesc" show-overflow-tooltip/>
            <el-table-column label="修改前" prop="oldValue" show-overflow-tooltip/>
            <el-table-column label="修改后" prop="value" show-overflow-tooltip/>
            <el-table-column label="修改时间"><template v-slot="{row}"><value :model="row" prop="createTime" type="datetime"/></template></el-table-column>
            <el-table-column label="修改人" prop="createUserName" show-overflow-tooltip/>
            <el-table-column label="备注" prop="remark" show-overflow-tooltip/>
          </el-table>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Value from '@/components/AdValue'
import { isArray, isNumber, isObj, isString } from '@/utils/type'
import { get as getOrderStepsData } from '@/api/step/order'
import { getList as getSiteList } from '@/api/site/all'
// import { getList as getLocationList } from '@/api/logistics/record'
import { getDetail } from '@/api/order/all'

export default {
  components: { Value },
  dicts: ['order_status','pickcar_type','takecar_type','settlement_type','yes_or_no','delivery_type','sign_type','delivery_payment_type','online_pay_way'],
  data() {
    return {
      orderStepsData: [],
      siteData: [],
      data: {},
      transportExpanded: [],
      feeDetail: {
        visible: false
      },
      modifyRecord: {
        visible: false
      },
      maxValidateImage: 10
    }
  },
  created() {
    // this.initLoading = true
    getSiteList().then(res => this.siteData = res.data)
    getOrderStepsData(this.$route.query.id).then(res => {
      this.orderStepsData = res.data
    })
    let scene = 1
    const query = {id: this.$route.query.id, params: {scene}}
    getDetail(query).then(res => {
      // this.initLoading = false
      this.data = res.data
      this.transportExpanded = res.data.transportSimpleList.map(transport => ({expanded: false}))
      // if (res.data.transportSimpleList && res.data.transportSimpleList.length > 0) {
      //   getLocationList(res.data.transportSimpleList[0].transportSimple.id).then(res => this.locationList = res.data.reverse())
      // }
    })
  },
  methods: {
    expand(index) {
      this.transportExpanded[index].expanded = !this.transportExpanded[index].expanded
      console.log(this.transportExpanded)
    },
    openModifyRecord() {
      this.modifyRecord.visible = true
    },
    openFeeDetail() {
      this.feeDetail.visible = true
    },
    isShowMoreValidateImage(index) {
      const maxImgs = this.maxValidateImage
      if (this.data && this.data.orderCarVerify && this.data.orderCarVerify.validateImages) {
        if (this.data.orderCarVerify.validateImages.length <= maxImgs) {
          return index < maxImgs - 2 ? true : false
        } else {
          return index < maxImgs - 1 ? true : false
        }
      } else {
        return false
      }
    },
    showMoreImgs() {
      this.$el.querySelector('.imgs').$viewer.view(this.maxValidateImage - 1)
    }
  },
  directives: {
    // 'ad-if': {
    //   update(el, arg) {
    //     if (arg.rawName.split(':').length < 2) return
    //     const prop = arg.rawName.split(':')[1]
    //     const placeholder = '-'
    //     const getLeafValue = (model, prop) => {
    //       const recursion = (curModel, prop, index) => {
    //         const isLeaf = prop.length - 1 == index // 是否是叶子属性
    //         let curProp = prop[index]
    //         let isArrProp = false // 是否是数组写法的参数
    //         // 检测是否有数组写法
    //         if (curProp && curProp.split('[').length > 1) {
    //           isArrProp = true
    //           curProp = curProp.split('[')[0]
    //         }
    //         const curValue = curModel[curProp]
    //         if (isObj(curValue)) {
    //           return recursion(curValue, prop, index+1)
    //         } else if (isArray(curValue)) {
    //           if (isLeaf) {
    //             return curValue
    //           }
    //           return recursion(curValue[0], prop, index+1)
    //         } else if (isNumber(curValue) || isString(curValue)) {
    //           if (curValue === "") return placeholder
    //           return curValue
    //         } else {
    //           return placeholder
    //         }
    //       }
    //       return recursion(model, prop, 0)
    //     }
    //     const value = getLeafValue(arg.value, prop.split('.'))
    //     if (value == '-' || value == 0) {
    //       el.parentNode && el.parentNode.removeChild(el)
    //     } else {
    //       document.querySelector('.accessory').append(el)
    //     }
    //   }
    // }
  }
}
</script>

<style lang="scss" scoped>
.center { width: 1150px; }
.btn-more { display: block; width: 100%; margin: 10px 0 0; padding-top: 5px; padding-bottom: 5px; box-sizing: border-box; border-radius: 0; background: #f9f9f9; font-size: 12px; font-weight: normal; }
::v-deep .el-table__empty-block { min-height: 110px; }

.imgs { display: flex; flex-wrap: wrap; height: 136px; overflow: hidden;
  .imgs-btn { position: absolute; bottom: 8px; right: 64px; width: 100px; height: 60px; }
}
.no-img { width: 100px; height: 60px; margin-top: 10px; border-radius: 4px; background: #e8e8e8; text-align: center; line-height: 60px; font-size: 12px; }

.status-steps { display: flex;
  .step.on {
    .icon {
      .dot { background: #1890FF; }
      .dash { background: #1890FF; }
      .dash:last-child { background: #e3e3e3; }}}
  .step.finish {
    .icon {
      .dot { background: #1890FF; }
      .dash { background: #1890FF; }}}
  .step { display: flex; flex: 1; flex-direction: column;
    .icon { display: flex; margin-bottom: 9px; align-items: center;
      .dot { width: 6px; height: 6px; margin: 0 3px; border-radius: 3px; background: #e3e3e3; }
      .dash { flex: 1; height: 2px; background: #e3e3e3; }}
    .label { margin-bottom: 4px; text-align: center; font-size: 14px; }
    .value { margin-bottom: 4px; text-align: center; font-size: 12px; color: #AEAEAE; }}
  .step:first-child .icon .dash:first-child { background: transparent; }
  .step:last-child .icon .dash:last-child { background: transparent; }}

::v-deep.el-table { font-size: 12px;
  .el-table__cell { padding-top: 6px; padding-bottom: 6px; }
  .cell { font-weight: normal; color: #000; white-space: nowrap; }
  th { background: #F5F5F5; }}

.imgs { position: relative; margin-top: 10px;
  img { width: 100px; height: 60px; margin-right: 8px; margin-bottom: 8px; border-radius: 4px; cursor: pointer; }}

.page-detail { display: flex; flex: 1; background: #eee; flex-direction: column; align-items: center;
  .detail { margin: 30px 0;
    h1 { margin: 0; padding: 16px 0 12px; text-align: center; font-size: 20px; font-weight: bold; }
    .top-line { position: relative; height: 2px; margin: 0 20px; background-image: linear-gradient(to right, #5EB9FF 25%, #DEDEDE 25%, #DEDEDE 50%, #5694B7 50%, #5694B7 75%, #DEDEDE 25%); background-size: 80px 2px; background-repeat: repeat-x; box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.12); }
    .label { white-space: nowrap; }
    .status { color: #EC2D0F; }
    .top-block { background: #fff; border: 1px solid #E3E3E3; border-bottom: none; }
    .top-block + .block { border-top: none; }
    .block { margin-bottom: 18px; padding: 20px; padding-top: 0; background: #fff; border: 1px solid #E3E3E3;
      .title-bar { display: flex; height: 48px; align-items: center;
        .title { display: flex; align-items: center;
          h2 { font-size: 14px; font-weight: bold; }
          i { font-size: 14px; color: #979797; font-style: inherit;
            &.required { color: red; }}}
        .op { margin-left: auto;
          .item { display: flex; align-items: center;
            .label { font-size: 14px; color: #303030; }}
          .el-button { font-size: 12px; font-weight: normal; }}}
      .order { border: 1px solid #E3E3E3; border-right: none; border-bottom: none; font-size: 12px;
        .el-col { display: flex; box-sizing: border-box; height: 35px; padding-left: 16px; padding-right: 16px; align-items: center; border: 1px solid #E3E3E3; border-top: none; border-left: none; white-space: nowrap; }
        .el-col:nth-child(odd) { background: #F5F5F5; }
      }}
    .blocks-2 { padding: 36px; background: #fff; border: 1px solid #E3E3E3; }
    .block-2:last-child { margin-bottom: 0; }
    .block-2 { margin-bottom: 30px;  border: 1px solid #e3e3e3;
      .title-bar { display: flex; height: 38px; padding-left: 20px; align-items: center; box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.12);
        .icon { width: 16px; margin-right: 6px; }
        h2 { font-size: 14px; font-weight: bold; }
        .separator { width: 2px; height: 16px; margin-left: 20px; background: #707070; }
        .items { display: flex; font-size: 12px;
          .item { display: flex; margin-left: 20px; }}}
      .content {
        .status-steps { margin: 44px 0 24px; }
      }
    }
    .block-2.table { border: none;
      .title-bar { border: 1px  solid #e3e3e3; border-bottom: none; }
    }
    .blocks-3 { padding: 36px 50px;
      .el-col { display: flex; }
      .separator { width: 1px; height: 142px; margin: 10px 50px 0 0; background: #E3E3E3; }
    }
    .block-3 {
      .item.bold { font-weight: bold;
        .value { color: #000; }
      }
      .item:last-child { margin-bottom: 0; }
      .item { display: flex; margin-bottom: 16px; font-size: 12px;
        .value { color: #666; }
      }
      .accessory { display: flex; flex-wrap: wrap;
        &>span>span { display: inline-block; width: 18px; text-align: center; }
        &>span::after { content: ''; margin-right: 18px; }
        &>span:last-child::after { content: none; }}}}}

.fee-block + .fee-block { margin-top: 20px; }
.fee-block:last-child { margin-bottom: 4px; }
.fee-block { padding: 0 20px 20px; box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.14);
  .title-bar { padding: 10px 0 14px;
    h2 {font-size: 14px; font-weight: bold; color: #000; }}}

.block-2-record { border-left: none !important; border-right: none !important; border-bottom: none !important;
  .title-bar { box-shadow: none !important; }
}
.record { padding: 24px 26px 12px; overflow: hidden; border-top: 1px solid #e3e3e3; font-size: 12px;
  .step { box-sizing: border-box;
    .info { display: flex; line-height: 14px;
      .icon-dot { width: 14px; height: 14px; min-width: 14px; margin-right: 14px; box-sizing: border-box; border: 2px solid #1890FF; border-radius: 7px; }
      .value { display: flex; flex: 1;
        &>*:first-child { margin-right: 10px; white-space: nowrap; }
        &>*:last-child { display: flex; flex: 1; width: 0; overflow: hidden; white-space: nowrap; }}}
    .other { display: flex;
      .icon-line { display: flex; width: 14px; min-width: 14px; min-height: 20px; margin-right: 14px; justify-content: center;
        &:after { content: ''; display: block; width: 2px; height: 100%; background: #dfdfdf; }}
      .other-content { padding-bottom: 14px; }
      .item { display: flex; flex: 1; margin-top: 2px; color: #a1a1a1;
        &:first-child { margin-top: 4px; }
        .label { white-space: nowrap; }}}
    &:last-child .other-content { padding-bottom: 0; }
    &:last-child .icon-line:after { background: #fff; }}}
</style>